<template>
    <div>

<el-dialog title="发布赛事招募" center width="30%" 
    v-dialogDrag
    custom-class="convene-div" 
    :visible.sync="DialogConvene"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :destroy-on-close="true">
    <el-form :model="params" :rules="rules" ref="params" label-position="top" size="small">
        <el-form-item label="房间标题:" prop="room_title">
            <el-input v-model="params.room_title" placeholder="请输入房间标题"></el-input>
        </el-form-item>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="赛事大区:" prop="room_region">
                    <el-select style="width: 100%;" v-model="params.room_region" @change="$emit('MusicSound', 'click_one')"  @click.native="$emit('MusicSound', 'click_one')" placeholder="请选择赛事大区">
                        <el-option label="请选择" value="" />
                        <el-option label="跨一" value="跨一" />
                        <el-option label="跨二" value="跨二" />
                        <el-option label="跨三A" value="跨三A" />
                        <el-option label="跨三B" value="跨三B" />
                        <el-option label="跨四" value="跨四" />
                        <el-option label="跨五" value="跨五" />
                        <el-option label="跨六" value="跨六" />
                        <el-option label="跨七" value="跨七" />
                        <el-option label="跨八" value="跨八" />
                    </el-select>
                </el-form-item>
            </el-col>
            <!-- reward: "¥500,卧底4人评分，好人7人平分",  -->

            <el-col :span="12">
                <el-form-item label="赛事开始时间:" prop="start_time">
                    <el-input v-model="params.start_time" placeholder="赛事开始时间"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="设置密码:" prop="is_password">
                    <el-select style="width: 100%;" v-model="params.is_password" @change="$emit('MusicSound', 'click_one')"  @click.native="$emit('MusicSound', 'click_one')" placeholder="请选择是否设置房间密码">
                        <el-option label="有锁" value="1" />
                        <el-option label="不设置密码" value="2" />
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="12" v-if="params.is_password == 1">
                <el-form-item label="房间密码:" prop="room_password">
                    <el-input v-model="params.room_password" disabled class="input-with-select">
                        <el-button slot="append" icon="el-icon-refresh" @click="generateRandomNumber()"></el-button>
                    </el-input>
                    <!-- <el-input v-model="params.room_password" placeholder="请输入房间密码"></el-input> -->
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="赛事奖励:" prop="room_reward">
            <el-input v-model="params.room_reward" type="textarea" maxlength="100" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请填写赛事奖励"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="params.room_content" type="textarea" maxlength="100" :autosize="{ minRows: 2, maxRows: 4}" placeholder="赛事备注"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('close', 'dialogConvene', false)" :loading="loadingInsert">取消发布</el-button>
        <el-button type="primary" @click="submitInsert()" :loading="loadingInsert">确认发布</el-button>
    </div>
</el-dialog>


    </div>
</template>

<script>
export default {
    name:'transfer',
    props:{
        DialogConvene:{
            required: true,//是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false,   //没有传值的话 默认值 一般与 required:false 一起用
        },
    },
    data() {
        return {
            loadingInsert: false,

            params: {
                // room_title:"YY：1236713，进来试麦给密码",
                // is_password: '1',
                // room_password: '',
                // room_reward: "¥500,卧底4人评分，好人7人平分",
                // start_time: "本周六下午3点开始",
                // room_region: "夸7",
                valid_operate:'inster',

                room_title: '',
                room_region: '',
                room_type: '',
                is_password: '1',
                room_password: '',
                start_time: "",
                room_reward: "",
                room_content: "",
            },
            rules: {
                room_title: [
                    { required: true, message: '请输入房间标题!', trigger: 'blur' },
                ],
                start_time: [
                    { required: true, message: '请选择赛事大区!', trigger: 'blur' }, 
                ],
                room_region: [
                    { required: true, message: '请选择赛事大区!', trigger: 'blur' },
                ],
                is_password: [
                    { required: true, message: '请选择是否设置房间密码!', trigger: 'blur' }, 
                ],
                room_password: [
                    { required: true, message: '请输入房间密码!', trigger: 'blur' }, 
                ],
                room_reward: [
                    { required: true, message: '请填写赛事奖励!', trigger: 'blur' }, 
                ],
            },
        }
    },
    watch:{
        DialogConvene: {
            handler(newValue, oldValue) {
                console.log("DialogConvene newValue, oldValue :", newValue, oldValue);
                if (newValue) {
                    this.generateRandomNumber();
                }
            },
            deep: true,
        },
    },
    methods: {
        submitInsert() {
            this.loadingInsert = true;
            this.$refs.params.validate(valid => {
                if (valid) {
					this.$post("/api/rooms/create.html", this.params).then(res => {
                        if (res.code == 200) {
                            this.$notify.success({title: 'Notice', message: "发布赛事成功"});
                            this.$emit('close', 'dialogConvene', false, 'convene', {
                                room_code: res.data.room_code,
                                password: this.params.room_password,
                            });
                        } else {
                            this.$notify.info({title: 'Notice', message: res.msg});
                        }
                        this.loadingInsert = false;
					}).catch(err => {
                        this.loadingInsert = false;
                        console.log(err);
                    });
                } else {
                    this.loadingInsert = false;
                }
            }); 
        },
        generateRandomNumber() {
            this.$emit('MusicSound', 'click_one');
            this.params.room_password = Math.floor(100000 + Math.random() * 900000);
        }
    },
}
</script>


<style>
.convene-div{
    min-width: 600px;
}
</style>



